<template>
	<view class="vertical-steps">
		<view v-for="(step, index) in steps" :key="index" class="step-item" :class="{ active: isActive(index) }">
			<view class="flex-around">
				<view class="" style="margin-top:8px">
					<!-- <view class="step-circle">{{ index + 1 }}</view> -->
					<view class="step-circle"></view>
					<view v-if="index !== steps.length - 1" class="step-line"
						:class="{ 'completed': isCompletedLine(index), 'future': !isCompletedLine(index) && index < activeStepIndex }">
					</view>
				</view>
				<!-- <view class="step-title">{{ step.title }}</view> -->
				<view class="step-title">
					<view>
						<text class="text1">{{ step.title }}</text>
						<text class="text1_time">2024-12-01</text>
					</view>
					<view class="text1_sub">您已报价，等待其他师傅报价</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VerticalSteps',
		props: [
			// 步骤列表，每个对象包含 title 属性
			"steps",
			// 当前激活的步骤索引
			"activeStepIndex"
		],
		methods: {
			isActive(index) {
				return index <= this.activeStepIndex;
			},
			isCompletedLine(index) {
				// 如果当前索引小于等于激活步骤索引，则认为这条线是已完成的
				return index < this.activeStepIndex;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-around {
		display: flex;
		justify-content: space-around;
	}

	.vertical-steps {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		.step-item {
			position: relative;
			// padding-left: 35px; // 调整以适应圆圈和线条
			margin-bottom: 20px;

			&.active {
				.step-circle {
					border: 2rpx solid $uni-color-primary;
					background-color: transparent; // 假设有一个主要颜色变量
					color: white;
				}
			}

			.step-circle {
				width: 18px;
				height: 18px;
				text-align: center;
				line-height: 24px;
				border-radius: 50%;
				background-color: #ccc; // 默认颜色
				display: inline-block;
				font-size: 14px;
				font-weight: bold;
			}

			.step-title {
				margin: 8px;

				.text1 {
					font-size: 14px;
					padding: 5px;
				}

				.text1_time,
				.text1_sub {
					font-size: 12px;
					color: #c1c1c1;
				}

			}

			.step-line {
				position: absolute;
				left: 8px; // 圆圈的中心位置
				top: 28px;
				bottom: 0;
				height: 45px;
				width: 2px;
				background-color: #ccc; // 默认线条颜色

				&.completed {
					background-color: $uni-color-primary; // 已完成线条的颜色，假设有一个成功颜色变量
				}

				&.future {
					background-color: #ccc; // 未来线条的颜色，假设有一个信息颜色变量
				}
			}

			&:last-child {
				.step-line {
					display: none;
				}
			}
		}
	}
</style>